<!-- contain BEGIN -->
<app-public-tab-user class="public-tab-user" [ngClass]="{'right-full':isActive, 'right-off':!isActive }"></app-public-tab-user>
<!-- <app-header></app-header> -->
<div class="right-product right-full background-input animate-time right-product-user" [ngClass]="{ 'right-full': isActive , 'right-off': !isActive }">
    <div class="center-back right-back">
        
        <!-- <app-breadcrumb [breadcrumbInfo]="{ 'secondLevel' : '角色管理', 'threeLevel' : '角色管理' }"></app-breadcrumb> -->

        <div class="button-group">
            <button type="button" class="btn btn-blue" mat-button data-toggle="modal" data-target="#add" *ngIf="right['role']['create']">
                <span class="glyphicon glyphicon-plus"></span> 新增
            </button>
            <button type="button" class="btn btn-orange" mat-button (click)="deletes()" *ngIf="right['role']['batchDelete']" [disabled]="isSelect" (click)="reduction()">
                <span class="glyphicon glyphicon-trash"></span> 批量删除
            </button>           
            <div class="input-group pull-left search-width" *ngIf="right['role']['query']">
                 <input type="text" class="form-control search-input" placeholder="请输入角色名称、描述搜索"  [(ngModel)]="searchData.queryCriteria" (input)="changesearch()" (keyup.enter)="changesearch()">
                 <button class="btn btn-search btn-blue" (click)="search()"mat-button>查询</button>
            </div>
        </div>
        <div class="container-fluid">
            <div class="info-center">
                <div class="contain">
                    <app-role-table #roleTable 
                                    [tableNumber]="tableNumber"
                                    [searchData]="searchData.queryCriteria"
                                    (tabeListOutput)="ParentList($event)" 
                                    (detailsOutput)="ParentDetails($event)" 
                                    (isSelectFromTable)="isSelectFromTableHandler($event)"
                                    >
                    </app-role-table>

                </div>
            </div>

            <app-pagination [getTotalItems]="totalItems" (isLoadTableFromPagination)="isLoadTableFromPaginationHandler($event)"></app-pagination>

        </div>
    </div>
</div>
<!-- contain END -->

<!--add-->
<app-role-add (addOutput)="ParentAdd($event)"></app-role-add>
<!--add end-->

<!-- 详情 BEGIN -->
<app-role-details [roledatas]="tabVal"></app-role-details>
<!-- 详情 END -->

<!-- 角色关联 BEGIN -->
<app-role-roleby ></app-role-roleby>
<!-- 角色关联  END -->

<!-- <app-role-limit></app-role-limit> -->

<!-- 删除 BEGIN -->
<app-role-delete (deleteOutput)="ParentDelete($event)"></app-role-delete>
<!-- 删除 END -->
<app-role-limit-tree></app-role-limit-tree>
<!--</div>-->
<div ng-include="'user/role/permissionAssignment.html'"></div>